<template>
  <div class="sheet">
    <div class="top">
      <van-icon name="arrow-left" @click="falses()" />
      <h2>答题卡</h2>
      <span>{{ answerList.length }}/{{ list.length }}题</span>
    </div>
    <footer>
      <div class="one">
        <h2>单选题</h2>
        <span>共{{ list.length }}题</span>
      </div>
    </footer>
    <van-row type="flex">
      <van-col span="4" v-for="(item, index) in list" :key="item.id"
        ><div
          :class="[
            { success: answerList[index] && answerList[index].isRight },
            { error: answerList[index] && !answerList[index].isRight }
          ]"
          @click="huigu(index)"
        >
          {{ index + 1 }}
        </div></van-col
      >
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'sheet',
  data () {
    return {}
  },
  props: {
    list: {
      default: function () {
        return []
      }
    },
    answerList: {
      default: function () {
        return []
      }
    }
  },
  methods: {
    // 关闭答题卡
    falses () {
      this.$emit('hide', false)
    },
    // 回顾题目
    huigu (index) {
      // console.log(`这是第${index + 1}题,下标是${index}`)
      this.$emit('huigu', index)
    }
  }
}
</script>

<style lang="less">
.sheet {
  .top {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    .van-icon.van-icon-arrow-left {
      width: 50px;
    }
    span {
      width: 50px;
      text-align: center;
    }
  }
  footer {
    .one {
      padding: 0 20px;
      display: flex;
      height: 44px;
      align-items: center;
      background-color: #f7f4f5;
      h2 {
        margin-right: 15px;
      }
    }
  }
  .van-row {
    .van-col {
      margin: 1.15vh 0;
      div {
        margin: auto;
        width: 33px;
        height: 33px;
        border-radius: 50%;
        background-color: #fff;
        line-height: 33px;
        border: 1px solid #b4b4bd;
        text-align: center;
        color: #b4b4bd;
        &.success {
          background-color: #ddfad9;
          border: 0;
          color: #1dc779;
        }
        &.error {
          background-color: #ffefea;
          border: 0;
          color: #ff4949;
        }
      }
    }
  }
}
</style>
